<template>
  <div class="layer-control" v-bind:class="{ 'layer-control-hidden': isHidden }">
    <div
      class="layer-control-control"
      v-bind:class="isHidden ? 'el-icon-arrow-left' : 'el-icon-arrow-right'"
      v-on:click="isHidden = !isHidden"
    ></div>
    <div class="layer-control-content">
      <el-dropdown trigger="click" :hide-on-click="false">
        <span class="el-dropdown-link">
          <img class="el-dropdown-link-img" src="@/assets/ic_line.png">
          <span class="el-dropdown-link-content">线位</span>
          <i class="el-dropdown-link-icon el-icon-arrow-down"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>
            <el-checkbox
              name="hpline"
              v-model="lineLayers.hpline.visible"
              v-on:change="changeLayerVisible(lineLayers.hpline)"
            >{{ lineLayers.hpline.name }}</el-checkbox>
          </el-dropdown-item>
          <el-dropdown-item>
            <el-checkbox
              name="sgtline"
              v-model="lineLayers.sgtline.visible"
              v-on:change="changeLayerVisible(lineLayers.sgtline)"
            >{{ lineLayers.sgtline.name }}</el-checkbox>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <el-dropdown trigger="click" :hide-on-click="false">
        <span class="el-dropdown-link">
          <img class="el-dropdown-link-img" src="@/assets/ic_remote_sensing.png">
          <span class="el-dropdown-link-content">遥感遥测</span>
          <i class="el-dropdown-link-icon el-icon-arrow-down"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>
            <el-checkbox
              name="ygyc201812"
              v-model="ygycLayers.ygyc201812.visible"
              v-on:change="changeLayerVisible(ygycLayers.ygyc201812)"
            >{{ ygycLayers.ygyc201812.name }}</el-checkbox>
          </el-dropdown-item>
          <el-dropdown-item>
            <el-checkbox
              name="ygyc201906"
              v-model="ygycLayers.ygyc201906.visible"
              v-on:change="changeLayerVisible(ygycLayers.ygyc201906)"
            >{{ ygycLayers.ygyc201906.name }}</el-checkbox>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <el-dropdown trigger="click" :hide-on-click="false">
        <span class="el-dropdown-link">
          <img class="el-dropdown-link-img" src="@/assets/ic_env.png">
          <span class="el-dropdown-link-content">环境敏感区</span>
          <i class="el-dropdown-link-icon el-icon-arrow-down"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>
            <el-checkbox
              name="env"
              v-model="envLayer.visible"
              v-on:change="changeLayerVisible(envLayer)"
            >{{ envLayer.name }}</el-checkbox>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <el-dropdown trigger="click" :hide-on-click="false">
        <span class="el-dropdown-link">
          <img class="el-dropdown-link-img" src="@/assets/ic_tmp_proj.png">
          <span class="el-dropdown-link-content">临时工程</span>
          <i class="el-dropdown-link-icon el-icon-arrow-down"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>
            <el-checkbox
              name="spoil"
              v-model="temporaryProjectLayers.spoil.visible"
              v-on:change="changeLayerVisible(temporaryProjectLayers.spoil)"
            >{{ temporaryProjectLayers.spoil.name }}</el-checkbox>
          </el-dropdown-item>
          <el-dropdown-item>
            <el-checkbox
              name="fetch"
              v-model="temporaryProjectLayers.fetch.visible"
              v-on:change="changeLayerVisible(temporaryProjectLayers.fetch)"
            >{{ temporaryProjectLayers.fetch.name }}</el-checkbox>
          </el-dropdown-item>
          <el-dropdown-item>
            <el-checkbox
              name="mixing"
              v-model="temporaryProjectLayers.mixing.visible"
              v-on:change="changeLayerVisible(temporaryProjectLayers.mixing)"
            >{{ temporaryProjectLayers.mixing.name }}</el-checkbox>
          </el-dropdown-item>
          <el-dropdown-item>
            <el-checkbox
              name="beam"
              v-model="temporaryProjectLayers.beam.visible"
              v-on:change="changeLayerVisible(temporaryProjectLayers.beam)"
            >{{ temporaryProjectLayers.beam.name }}</el-checkbox>
          </el-dropdown-item>
          <el-dropdown-item>
            <el-checkbox
              name="sleeper"
              v-model="temporaryProjectLayers.sleeper.visible"
              v-on:change="changeLayerVisible(temporaryProjectLayers.sleeper)"
            >{{ temporaryProjectLayers.sleeper.name }}</el-checkbox>
          </el-dropdown-item>
          <el-dropdown-item>
            <el-checkbox
              name="track"
              v-model="temporaryProjectLayers.track.visible"
              v-on:change="changeLayerVisible(temporaryProjectLayers.track)"
            >{{ temporaryProjectLayers.track.name }}</el-checkbox>
          </el-dropdown-item>
          <el-dropdown-item>
            <el-checkbox
              name="steel"
              v-model="temporaryProjectLayers.steel.visible"
              v-on:change="changeLayerVisible(temporaryProjectLayers.steel)"
            >{{ temporaryProjectLayers.steel.name }}</el-checkbox>
          </el-dropdown-item>
          <el-dropdown-item>
            <el-checkbox
              name="transfer"
              v-model="temporaryProjectLayers.transfer.visible"
              v-on:change="changeLayerVisible(temporaryProjectLayers.transfer)"
            >{{ temporaryProjectLayers.transfer.name }}</el-checkbox>
          </el-dropdown-item>
          <el-dropdown-item>
            <el-checkbox
              name="temporary"
              v-model="temporaryProjectLayers.temporary.visible"
              v-on:change="changeLayerVisible(temporaryProjectLayers.temporary)"
            >{{ temporaryProjectLayers.temporary.name }}</el-checkbox>
          </el-dropdown-item>
          <el-dropdown-item>
            <el-checkbox
              name="camp"
              v-model="temporaryProjectLayers.camp.visible"
              v-on:change="changeLayerVisible(temporaryProjectLayers.camp)"
            >{{ temporaryProjectLayers.camp.name }}</el-checkbox>
          </el-dropdown-item>
          <el-dropdown-item>
            <el-checkbox
              name="other"
              v-model="temporaryProjectLayers.other.visible"
              v-on:change="changeLayerVisible(temporaryProjectLayers.other)"
            >{{ temporaryProjectLayers.other.name }}</el-checkbox>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <el-dropdown trigger="click" :hide-on-click="false">
        <span class="el-dropdown-link">
          <img class="el-dropdown-link-img" src="@/assets/ic_monitor.png">
          <span class="el-dropdown-link-content">监测点</span>
          <i class="el-dropdown-link-icon el-icon-arrow-down"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>
            <el-checkbox
              name="gps"
              v-model="monitorLayers.gps.visible"
              v-on:change="changeLayerVisible(monitorLayers.gps)"
            >{{ monitorLayers.gps.name }}</el-checkbox>
          </el-dropdown-item>
          <el-dropdown-item>
            <el-checkbox
              name="yczsjc"
              v-model="monitorLayers.yczsjc.visible"
              v-on:change="changeLayerVisible(monitorLayers.yczsjc)"
            >{{ monitorLayers.yczsjc.name }}</el-checkbox>
          </el-dropdown-item>
          <el-dropdown-item>
            <el-checkbox
              name="sdwsjc"
              v-model="monitorLayers.sdwsjc.visible"
              v-on:change="changeLayerVisible(monitorLayers.sdwsjc)"
            >{{ monitorLayers.sdwsjc.name }}</el-checkbox>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>

<script>
import { mapData, mapMethods } from "@/stores/map-store";

export default {
  name: "layer-control",
  data() {
    return {
      isHidden: true,
      store: {
        mapData,
        mapMethods
      }
    };
  },
  mounted() {
    const _this = this;
    _this.loadAllLayers();
  },
  methods: {
    loadAllLayers() {
      const _this = this;
      _this.store.mapMethods.loadAllLayers();
    },
    changeLayerVisible(layerObj) {
      if (layerObj.layer) {
        layerObj.layer.setVisible(layerObj.visible);
      }
    }
  },
  computed: {
    lineLayers() {
      const _this = this;
      return _this.store.mapData.layers.line;
    },
    ygycLayers() {
      const _this = this;
      return _this.store.mapData.layers.ygyc;
    },
    envLayer() {
      const _this = this;
      return _this.store.mapData.layers.env;
    },
    temporaryProjectLayers() {
      const _this = this;
      return _this.store.mapData.layers.temporaryProject;
    },
    monitorLayers() {
      const _this = this;
      return _this.store.mapData.layers.monitor;
    }
  }
};
</script>

<style scoped>
.layer-control {
  position: absolute;
  top: 10px;
  right: 0;
  background-color: rgba(255, 255, 255, 0.6);
  border-radius: 5px;
  padding: 5px 5px 5px 0;
  display: flex;
  flex-direction: row;
  transition: right 0.3s;
  user-select: none;
  border: 1px solid lightgray;
}

.layer-control-hidden {
  right: -665px;
}

.layer-control-control {
  cursor: pointer;
}

.layer-control-control::before {
  color: white;
  width: 20px;
  top: 50%;
  font-size: 20px;
  position: relative;
  display: block;
  transform: translate(0, -50%);
}

.el-dropdown + .el-dropdown {
  margin-left: 5px;
}

.el-dropdown-link {
  background-color: white;
  height: 26px;
  line-height: 26px;
  display: inline-block;
  padding: 4px 10px;
  border-radius: 5px;
  cursor: pointer;
}

.el-dropdown-link:hover {
  box-shadow: 2px 2px 1px 1px rgba(0, 0, 0, 0.3);
}

.el-dropdown-link-img {
  display: inline-block;
  vertical-align: middle;
  width: 16px;
  height: 16px;
}

.el-dropdown-link-content {
  display: inline-block;
  vertical-align: middle;
  margin: 0 10px;
  font-size: 16px;
}

.el-dropdown-link-icon {
  display: inline-block;
  vertical-align: middle;
}
</style>
